<template>
  <div class="my">
    <!-- 一、 主体 -->
    <template v-if="!profile.token">
      <div class="login-bg">
        <routerLink to="/login">
          <div class="login">登录/注册</div>
        </routerLink>
      </div>
    </template>
    <!-- 1. 个人信息 -->
    <template v-if="profile.token">
      <div class="my-info">
        <van-image
          round
          width="5rem"
          height="5rem"
          :src="profile.user_avatar"
          class="info-picture"
          fit="cover"
        />
        <!-- ?? require('@/assets/images/cat.png') -->
        <div class="userInfo">
          <span class="info-name">{{ profile.user_name }}</span>
          <div class="info-num">
            <span class="info-atte">关注 {{ profile.user_focus }}</span
            >&nbsp;&nbsp;&nbsp;
            <span class="info-fans">粉丝 {{ profile.user_fans }}</span>
          </div>
          <div class="van-ellipsis info-brief">
            {{ profile.user_intro ? profile.user_intro : "暂时没有简介" }}
          </div>
        </div>
        <routerLink to="/user/userInfo">
          <van-icon name="arrow" size="20" />
        </routerLink>
      </div>
    </template>

    <div class="main">
      <van-grid :border="false" class="grid">
        <van-grid-item icon="envelop-o" icon-color="orange" text="通知" />
        <van-grid-item
          icon="star-o"
          icon-color="orange"
          text="收藏"
          to="/user/collect"
        />
        <van-grid-item
          icon="bookmark-o"
          icon-color="orange"
          text="发布"
          to="/user/publish"
        />
        <van-grid-item
          icon="newspaper-o"
          icon-color="orange"
          text="已领养"
          to="/user/adopt"
        />
      </van-grid>
      <van-cell-group class="cell">
        <van-cell title="帮助与反馈" icon="question-o" is-link />
        <van-cell title="平台规则" icon="warning-o" is-link />
        <van-cell title="领养协议" icon="location-o" is-link />
        <van-cell title="设置" icon="setting-o" is-link to="/setting" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  name: "User",
  setup() {
    const store = useStore();
    const profile = computed(() => store.state.user.profile);
    return {
      profile,
    };
  },
};
</script>

<style lang="less" scoped>
.my {
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  .login-bg {
    height: 10rem;
    background-image: url("../../assets/images/bg1.webp");
    background-size: cover;
  }
  .login {
    text-align: center;
    line-height: 8rem;
    font-size: 1.3rem;
    color: #000;
  }
  .my-info {
    height: 9rem;
    // border-bottom: 0.001rem solid #e1e1e1;
    .van-icon-arrow {
      float: right;
      top: -3rem;
      right: 1rem;
    }
    .info-picture {
      margin: 1.8rem;
    }
    .userInfo {
      margin-left: 8rem;
      margin-top: -7rem;

      .info-name {
        font-size: 1.3rem;
        font-weight: 600;
        color: #000;
      }
      .info-num {
        color: #ababad;
        font-size: 0.8rem;
        line-height: 2rem;
      }
      // .info-atte {
      //   font-size: 0.8rem;
      // }
      // .info-fans {
      //   font-size: 0.8rem;
      // }
      // 简介
      .info-brief {
        width: 10rem;
        color: #7a7a7c;
        font-size: 0.8rem;
      }
    }
  }
  .main {
    height: 50rem;
    background-color: #fff;
    overflow: hidden;

    margin-top: -1rem;
    border-radius: 2rem 2rem 0 0;

    // .grid {
    //   width: 100%;
    //   margin: 1rem 0;
    //   border-radius: 0.6rem;
    // }
  }
}
</style>
